import { useState, useEffect } from 'react'
import { Button, Tabs, Drawer, Modal } from 'antd'
import { DownOutlined, CloseOutlined } from '@ant-design/icons'

import IndexBar from '../common/IndexBar'
import WellReceived from './WellReceived'
import Screen from './Screen'

import store from '../../store'
import {torem} from '../../assets/js/rem'

function Movie() {
  const [open, setOpen] = useState(!1);
  const leftbut = <Button type="text" ghost style={{ width: torem(130) }} onClick={() => setOpen(!0)}>{store.getState().city}<DownOutlined /></Button>
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleCancel = () => {
    document.querySelector('#video').pause()
    setIsModalOpen(false);
  };

  const items = [
    {
      key: '1',
      label: <Button ghost type="primary" style={{ width: torem(120),borderColor:'#fff',color:'#333' }}>正在热映</Button>,
      children: <WellReceived video={showModal}/>,
    },
    {
      key: '2',
      label: <Button type="primary" ghost style={{ width: torem(120),borderColor:'#fff',color:'#333' }}>即将上映</Button>,
      children: <Screen video={showModal}/>,
    }
  ];

  useEffect(() => {
    store.dispatch({type:'changeFooter',data:true})
  }, [])

  return (
    <div>
      <Tabs size="small" tabBarStyle={{ margin: 0 }} tabBarGutter={0} tabBarExtraContent={{ 'left': leftbut }} defaultActiveKey="1" items={items}/>
      <Drawer extra={<CloseOutlined onClick={() => setOpen(!1)}/>} title={<h2 style={{fontSize: torem(20),fontWeight:700,textAlign:'center'}}>选择城市</h2>} placement="top" height='100%' closable={false} onClose={() => setOpen(!1)} open={open} bodyStyle={{padding:0}}>
        <IndexBar open={setOpen}/>
      </Drawer>
      <Modal title="" width={100} footer={null} closable={false} open={isModalOpen} onCancel={handleCancel}>
        <video id='video' className='u-video' style={{width:torem(335),height:torem(200)}} src={store.getState().video.src} poster={store.getState().video.img} controls/>
      </Modal>
    </div>
  )
  
  
}

export default Movie